<!-- CustomLoadingIcon.vue -->
<template>
  <el-icon class="is-loading">
    <svg class="circular" viewBox="0 0 20 20">
      <g class="path2 loading-path" stroke-width="0" style="animation: none; stroke: none">
        <circle r="3.375" class="dot1" rx="0" ry="0" />
        <circle r="3.375" class="dot2" rx="0" ry="0" />
        <circle r="3.375" class="dot4" rx="0" ry="0" />
        <circle r="3.375" class="dot3" rx="0" ry="0" />
      </g>
    </svg>
  </el-icon>
</template>

<style>
.circular {
  display: inline;
  height: 30px;
  width: 30px;
  animation: loading-rotate 2s linear infinite;
}
.path2 .dot1 {
  transform: translate(3.75px, 3.75px);
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
}
.path2 .dot2 {
  transform: translate(calc(100% - 3.75px), 3.75px);
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 0.4s;
}
.path2 .dot3 {
  transform: translate(3.75px, calc(100% - 3.75px));
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 1.2s;
}
.path2 .dot4 {
  transform: translate(calc(100% - 3.75px), calc(100% - 3.75px));
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 0.8s;
}
@keyframes loading-rotate {
  to {
    transform: rotate(360deg);
  }
}
@keyframes custom-spin-move {
  to {
    opacity: 1;
  }
}
</style>
